import { View } from "@tarojs/components";
import { EChart } from "echarts-taro3-react";
import { useEffect } from "react";
import { useRef } from "react";

const UserCharts = ({ title }) => {
  const barChart = useRef();

  const refBarChart = (node) => {
    barChart.current = node;
  };

  useEffect(() => {
    if (barChart) {
      const defautOption = {
        title: {
          text: title,
          subtext: "总数2000",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 500, name: "最近7天" },
              { value: 500, name: "最近30天" },
              { value: 1000, name: "其他时间" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      barChart?.current?.refresh(defautOption);
    }
  }, [barChart]);

  return (
    <View
      style={{
        width: "100vw",
        height: 300,
        marginTop: 12
      }}
    >
      {" "}
      <EChart ref={refBarChart} />
    </View>
    //force-use-old-canvas="true"
  );
};

export default UserCharts;
